<template>
  <div>
    <el-dialog
      title="积分二维码"
      width="600px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialogBody">
        <div class="qrcode">
          <!-- <div class="qrcodeimg" ref="qrCodeDiv"></div> -->
          <div class="qrcodeimg" ref="qrCodeDiv"></div>
        </div>
        <div class="userInfoBox">
          <el-form
            inline
            ref="ruleForm"
            label-position="right"
            label-width="70px"
            align="center"
            size="small"
          >
            <el-form-item label="姓名：" prop="userInfo.name">
              <el-input v-model="params.userName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="userInfo.mobile">
              <el-input v-model="params.mobile" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="房屋：" prop="userInfo.house.name ">
              <el-input v-model="params.house_name" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">关 闭</el-button>
        <el-button size="small" type="primary" @click="onSubmit('ruleForm')"
          >保存图片</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import { UserQrcode } from "@/api/score.js";
export default {
  name: "",
  props: ["dialogVisible", "id", "info"],
  data() {
    return {
      userInfo: {
        house: {},
      },
      infoShow: false,
      params: {
        userName: "",
        mobile: "",
        house_name: "",
      },
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  created() {
    this.getQrcode();
    this.params.userName = this.info.userName;
    this.params.mobile = this.info.mobile;
    this.params.house_name = this.info.house.name;
  },
  mounted() {},

  methods: {
    getQrcode() {
      UserQrcode({ uid: this.id }).then((res) => {
        if (res.code == 200) {
          console.log(res.data, "<<<<<<");
          this.drawQrCode(res.data.qrCode);
        }
      });
    },
    //根据参数生成二维码
    drawQrCode(code) {
      // 解决重复点击预览按钮会重复生成二维码
      if (this.$refs.qrCodeDiv) {
        this.$refs.qrCodeDiv.innerHTML = "";
      }
      new QRCode(this.$refs.qrCodeDiv, {
        text: code, // 需要转换为二维码的内容
        width: 300, //宽度
        height: 300, //高度
        colorDark: "#000000", //二维码方块颜色
        colorLight: "#ffffff", //背景颜色
        correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
      });
    },

    saveQrcode() {
      //找到canvas标签
      const myCanvas = this.$refs.qrCodeDiv.getElementsByTagName("canvas");
      //创建一个a标签节点
      const a = document.createElement("a");
      //设置a标签的href属性（将canvas变成png图片）
      a.href = myCanvas[0]
        .toDataURL("image/png")
        .replace("image/png", "image/octet-stream");
      //设置下载文件的名字
      a.download = "我的专属二维码.png";
      //点击
      a.click();
    },
    onSubmit(formName) {
      this.saveQrcode();
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  display: flex;
  flex-direction: column;
  //   justify-content: space-between;
  align-items: center;

  .qrcode {
    width: 366px;
    height: 366px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    // border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    .qrcodeimg {
      margin-top: 4px;
      width: 310px;
      height: 310px;
      // padding: 30px;
      border-radius: 0px 0px 0px 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
  }
  .userInfoBox {
    // display: flex;
    // justify-content: center;
    margin: 20px 0 0 0;
    /deep/.el-input__inner {
      width: 300px;
    }
  }

  .el-autocomplete {
    width: 90%;
  }
}
</style>
<style lang="scss">
.my-autocomplete {
  li {
    line-height: 20px;
    padding: 7px;
    > div {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .addr {
      font-size: 14px;
      color: #999;
    }
  }
}
.formBox {
  margin-top: 20px;
  .el-input__inner {
    width: 500px;
  }
  .el-textarea__inner {
    width: 500px;
  }
}
</style>
